<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:sf="http://www.springframework.org/tags/faces"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions"
                template="/WEB-INF/layouts/standard.xhtml">

<ui:define name="content">
<div>
    <h1>Welcome to Web Demo</h1>
</div>
<h3>Some style datatable example</h3>
<h:form>
<div class="fleft padding3 div1">
    <p:dataTable var="usr" value="#{users}" styleClass="bd"> 
      <f:facet name="header">  
          Header - List of Users  
      </f:facet> 
      <p:column>  
          <f:facet name="header"> User Name </f:facet>  
          <h:outputText value="#{usr.username}" />  
      </p:column>  

      <p:column>  
          <f:facet name="header">First Name </f:facet>  
          <h:outputText value="#{usr.firstname}" />  
      </p:column>  

      <p:column>  
          <f:facet name="header"> Last Namer </f:facet>  
          <h:outputText value="#{usr.lastname}" />  
      </p:column>  

      <p:column>  
          <f:facet name="header">Age </f:facet>  
          <h:outputText value="#{usr.age}" />  
      </p:column>
       <f:facet name="footer">  
          Footer - In total there are #{fn:length(users)} users.  
      </f:facet>   
   </p:dataTable>
   
</div>

<div class="div2">
    <div class="ptop">
	    <span class="ui-breadcrumb-chevron ui-icon ui-icon-triangle-1-e" />
	    <h:commandLink value="DataTable 1" action="datatable1"/>
	    <h:outputText value=" -   Checkbox Based Selection  " />
    </div>
    <div class="clearie"></div>
    <div class="ptop">
        <span class="ui-breadcrumb-chevron ui-icon ui-icon-triangle-1-e" />
        <h:commandLink value="DataTable 2" action="datatable2"/>
        <h:outputText value=" -   List of Users - In-Cell Editing " />
    </div>
    <div class="clearie"></div>
    <div class="ptop">
        <span class="ui-breadcrumb-chevron ui-icon ui-icon-triangle-1-e" />
        <h:commandLink value="DataTable 3" action="datatable3"/>
        <h:outputText value=" -   Selection row by click on row" />
    </div>
    <div class="clearie"></div>
    <div class="ptop">
        <span class="ui-breadcrumb-chevron ui-icon ui-icon-triangle-1-e" />
        <h:commandLink value="DataTable 4" action="datatable4"/>
        <h:outputText value=" -   Filter - Sort data" />
    </div>
    <div class="clearie"></div>
    <div class="ptop">
        <span class="ui-breadcrumb-chevron ui-icon ui-icon-triangle-1-e" />
        <h:commandLink value="DataTable 5" action="datatable5"/>
        <h:outputText value=" -   Conditional Coloring" />
    </div>
    <div class="clearie"></div>
    <div class="ptop">
        <span class="ui-breadcrumb-chevron ui-icon ui-icon-triangle-1-e" />
        <h:commandLink value="DataTable 6" action="datatable6"/>
        <h:outputText value=" -   Add row / Delete row selected" />
    </div>
</div>

</h:form>
</ui:define>
</ui:composition>